@import './reset';
@import './setting';
@import './flex';
@import './nav';

@function getvw($w) {
    @return calc($w / 375) * 100+vw;
}

body {
    background: #e9ecf0ff;
}

.container {
    width: getvw(375);
    @extend %columnCenter;

    header {
        width: 100%;
        margin-bottom: getvw(8);

        nav {
            height: getvw(45);
        }
    }

    main {

        ul {
            width: getvw(365);
            border-radius: getvw(10);
            
            li {
                background-color: #ffffff;
                width: 100%;
                font-size: getvw(14);
                font-weight: 400;
                color: #555555ff;
                margin-bottom: getvw(5);
                display: flex;
                flex-direction: column;

                .title {
                    @extend %betweenCenter;
                    padding: getvw(15);
                }

                .content {
                    @extend %betweenCenter;
                    background: #f7f9faff;
                    padding: getvw(15);
                    
                    .conLeft {
                        @extend %center;
                        img {
                            width: getvw(60);
                            margin-right: getvw(13);
                        }

                        span {
                            font-size: 12px;
                        }
                    }

                    .conRight {
                        span {
                            color: #ff2222ff;
                        }
                    }
                }

                button {
                    margin: getvw(10);
                    width: getvw(80);
                    border-radius: getvw(20);
                    border: getvw(1) solid $themColor;
                    color: $themColor;
                    font-size: getvw(16);
                    padding: getvw(4) 0 getvw(6);
                    background-color: transparent;
                    align-self: flex-end;
                }
            }
        }
    }
}